<template>
  <div class="order-address">
    <div class="title">
      收货方式:
    </div>
    <div class="address">
      <ul class="list">
        <template v-for="(item, index) in list">
          <li
            class="list-item"
            :key="index"
          >
            <div class="selected">
              <cube-checkbox v-model="item.selected" :option="{label: ''}" @input="selectedStore(item)" />
<!--              <cube-checkbox v-model="item.selected" :option="{label: ''}" />-->
            </div>
            <div class="desc">{{item.label}}</div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreSelected',
  props: ['list'],
  data() {
    return {
    }
  },
  methods: {
    selectedStore(item) {
      // console.log(item)
      this.$emit('selectedStore', item)
    }
  }
}
</script>

<style scoped lang="stylus">
.order-address
  margin 10px
  padding 15px 10px
  background white
  border-radius 10px
  .title
    font-weight 700
    text-align left
    padding-bottom 10px
  .address
    margin 10px
    //position relative
    .list
      .list-item
        //margin-bottom 10px
        line-height 1.2em
        display flex
        //padding 10px 0
        align-items center
        //background red
        margin-bottom 5px
        .selected
          width 35px
          font-size 20px
          //background red
          //padding-top 15px
        .desc
          flex 1
          text-align left
          padding-left 10px
          font-size 14px
          //background blue
          //::v-deep
          //  p
          //    line-height 20px
          //    display flex
          //    .left
          //      width 70px
          //      font-weight 700
          //    .right
          //      flex 1
          //      &.color
          //        color red
          //      &.info
          //        word-break break-word
</style>
